<template>
  <div class="popularize-check">
    <!-- 数据导出 -->
    <p class="popular-export">
      <el-button @click.stop="onGetExportPopulCheckData">
        导出Excel
        <span style="font-size: 12px;">(全部)</span>
      </el-button>
      <iframe ref="populCheckIframe"></iframe>
    </p>

    <!-- 推广标识生成列表 -->
    <div class="popularize-list" v-if="promtDayList && promtDayList.length > 0">
      <!-- table -->
      <el-table
        :data="promtDayList"
        style="width: 100%">
        <el-table-column type="index" width="100"></el-table-column>
        <el-table-column prop="click" label="click"></el-table-column>
        <el-table-column prop="pv" label="pv"></el-table-column>
        <el-table-column prop="uv" label="uv"></el-table-column>
        <el-table-column prop="form" label="form"></el-table-column>
        <el-table-column prop="fr" label="fr"></el-table-column>
        <el-table-column prop="fr_zh" label="fr_zh"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
      </el-table>
    </div>

    <!-- pagination -->
    <p class="popular-pag" v-if="promtDayList && promtDayList.length > 0">
      <el-pagination
        v-if="totalPage"
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :page-count="totalPage"
        :current-page="popuCurPage"
        @current-change="handleCurrentChange">
      </el-pagination>
    </p>

    <!-- NoData -->
    <NoData v-if="!promtDayList || promtDayList.length <= 0"></NoData>

    <!-- echarts -->
    <BasicBar v-if="bIsShow" id="0" :bIsShow="bIsShow" :eData="curBasicBarData" :xLabelRotate="true" title="点击次数/pv/uv 柱状图"></BasicBar>
    <BasicLine v-if="bIsShow" id="0" :bIsShow="bIsShow" :eData="curBasicBarData" :xLabelRotate="true" title="点击次数/pv/uv 折线图"></BasicLine>
  </div>
</template>

<script>
  import NoData from '@/views/child/admin/adminData/NoData.vue';
  import {mapState, mapActions} from 'vuex'
  import {defineAsyncComponent} from 'vue'
  export default {
    setup () {
      return {
        pageSize: 20,
        popuCurPage: 1,
      }
    },
    props: ['site_id', 'active'],
    components: {
      BasicBar: defineAsyncComponent(() => import('@/views/child/admin/echart/echartsComps/BasicBar.vue')),
      BasicLine: defineAsyncComponent(() => import('@/views/child/admin/echart/echartsComps/BasicLine.vue')),

      NoData,
    },
    computed: {
      ...mapState({
        totalPage: state => state.user.myPopularize.popularDayData.totalPage || 0,
        promtDayList: state => state.user.myPopularize.popularDayData.list,
      }),
      curBasicBarData() {
        let _tempEData = {};
        _tempEData.xName = '日期';
        _tempEData.yName = '次数';
        _tempEData.xData = [];
        _tempEData.yData = [
          {
            name: '',
            data: []
          },
          {
            name: '',
            data: []
          },
          {
            name: '',
            data: []
          }
        ];

        this.promtDayList && this.promtDayList.forEach((item) => {
          _tempEData.xData.push({
            value: item.date
          });
          _tempEData.yData[0].name = 'click';
          _tempEData.yData[0].data.push(item.click);
          _tempEData.yData[1].name = 'pv';
          _tempEData.yData[1].data.push(item.pv);
          _tempEData.yData[2].name = 'uv';
          _tempEData.yData[2].data.push(item.uv);
        });

        return _tempEData;
      },
      bIsShow() {
        return this.active === 'third';
      },
    },
    beforeMount() {
      // post
      this.getPromtDay({
        site_id: this.site_id,
        pageSize: this.pageSize,
        page: this.popuCurPage,
      });
    },
    methods: {
      ...mapActions({
        getPromtDay: 'user/getPromtDay',
      }),
      handleCurrentChange(val) {
        // set popuCurPage
        this.popuCurPage = val;

        // post
        this.getPromtDay({
          site_id: this.site_id,
          pageSize: this.pageSize,
          page: this.popuCurPage,
        });
      },
      onGetExportPopulCheckData() {
        this.$refs.populCheckIframe.src = this.env.apiUrl + '/stat/expdatapvuv?site_id=' + this.site_id;
      },
    },
  }
</script>

<style lang="scss" scoped>
  .popular-export {
    margin: 20px;
    text-align: right;

    iframe {
      display: none;
    }
  }

  .popularize-list {
    // padding-bottom: 20px;
    margin: 20px 20px;
    box-shadow: 5px 8px 12px #ebedf0;

    .el-table{
      font-size:12px;

      .el-table__header {
        tr {
          background-color: #e4e7eb;
        }

        th {
          font-size: 14px;
          background-color: #e4e7eb;
          color: #43475c;
          font-weight: normal;
        }
      }

      .el-table__header, .el-table__body {
        tr {
          position: relative;

          td:nth-child(1) , th:nth-child(1) {
            div {
              text-align: center;
            }
          }
        }
      }
    }
  }

  .popular-pag {
    margin-top: 45px;
    margin-bottom: 40px;
    text-align: center;
  }
</style>
